<template>
	<view>
		<view class="page-body">
			<view class="live-box" :style="{background:'url('+baseUrl +'live-bg.jpg)',backgroundSize:'cover'}">
				<view id="video-container" class="video-container"></view>
				<view class="live-mask u-p-30">
					<view class="header u-flex u-row-between">
						<u-icon label="翻转" size="44" label-color="#fff" name="../static/images/live/camera-reverse.png">
						</u-icon>
						<u-icon name="close" color="#fff" size="44" @click="exitRoom"></u-icon>
					</view>
					<view class="form u-flex">
						<view class="thumb upload-live-thumb">
							<u-upload max-count="1" @on-change="uploaded" @on-remove="removeImg" :custom-btn="true"
								:show-progress="false" :action="upAction">
								<view slot="addBtn">
									<view class="upload-btn u-flex u-row-center u-col-center">
										<u-icon name="plus" size="60" color="#fff" margin-top="20rpx" label="直播封面"
											label-color="#fff" label-pos="bottom" label-size="24rpx"></u-icon>
									</view>
								</view>
							</u-upload>
						</view>
						<view class="u-flex-1">
							<u-field v-model="room.name" type="textarea" label-width="0" :clearable="false"
								:border-bottom="false" :auto-height="false"
								:field-style="{height:'160rpx',lineHeight:'50rpx',color:'#fff'}"
								placeholder-style="color:#bfbfbf;font-size:32rpx;" placeholder="给直播写个标题吧～"></u-field>
						</view>
					</view>
					<view class="liveroom-url form mt20">
						<view class="u-flex u-row-between color-ff">
							<view class="fs28">直播间地址:</view>
							<view class="fs24" @click="app.copy(live_url)">点击复制</view>
						</view>
						<view class="mt20 fs28 color-ff">
							{{live_url}}
						</view>
					</view>
					<view class="footer-box u-flex u-p-30">
						<u-button shape="circle" :hair-line="false" :custom-style="{border:'none',color:'#5CB61A'}"
							class="fs36" hover-class="none">
							<u-icon name="../static/images/live/beauty-face.png" size="44"></u-icon>
							美颜
						</u-button>
						<u-button hover-class="none" @click="creatLiveRoom" shape="circle" :hair-line="false"
							:custom-style="{border:'none'}" class="u-flex-1 u-m-l-30 defaultbtn fs36">开启直播</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TWebLive from 'tweblive'
	

	export default {
		data() {
			return {
				baseUrl: this.config.baseUrl,
				upAction: this.config.upImageUrl,
				room: {
					thumb: '',
					name: ''
				},
				live_url: 'https://www.baidu.com/',
				isTest: false,
				pusher:{}
			}
		},
		onLoad() {
			//this.app.isLogin(this); //强制登陆
			//this.checkTips();
		},
		mounted() {
			// 初始化监听器
			this.initListener()
			//this.webLiveLogin(this.chatInfo.userId, this.chatInfo.userSig)
		},
		methods: {
			initListener() {
				const pusher = TWebLive.createPusher({
					userID: '9527'
				})
				this.pusher = pusher
				this.setRenderView()
				
				//this.pusher.on(TWebLive.EVENT.RTC_CONNECTION_STATE_CHANGED, this.onRTCConnectionStateChanged)
				//this.pusher.on(TWebLive.EVENT.RTC_CLIENT_BANNED, this.onRTCClientBanned)
				//this.pusher.on(TWebLive.EVENT.RTC_CLIENT_ERROR, this.onRTCError)
			},
			//开启本地预览
			setRenderView() {
				this.pusher.setRenderView({
					elementID: 'video-container',
					audio: true,
					video: true
				}).then(() => {
					console.log('demo pusher | setRenderView | ok')
					// 设置背景
					let el = window.document.getElementById('video-container').childNodes
					el[0].style.backgroundColor = 'rgba(0,0,0,0)'
					this.isStartCamera = false
				}).catch((error) => {
					console.error('demo pusher | setRenderView | failed', error)
				})
			},
			uploaded(res, index, lists) {
				var res = JSON.parse(res.data);
				this.room.thumb = res.file;
			},
			removeImg(index, lists) {
				let file = this.room.thumb;
				this.room.thumb = '';
				this.$u.post(this.config.removeImageUrl, {
					file: file
				}).then(res => {})
			},
			checkTips() {
				uni.showModal({
					title: '温馨提示',
					content: '为了保证您的摄像头和麦克风可以正常使用，在开始直播前请您完成设备检测哦~',
					success: function(res) {
						if (res.confirm) {
							this.isTest = true
						} else if (res.cancel) {
							uni.showToast({
								title: '已取消',
								icon: 'none'
							})
						}
					}
				});
			},
			creatLiveRoom() {
				this.creatLive()
			},
			creatLive() {
				if (this.pushInfo.title === '') {
					this.pushInfo.title = `${this.userInfo.nickName}发布了直播`
				}
				let title = this.pushInfo.title
				this.$u.post(
						`https://service-62h5r0ea-1252463788.gz.apigw.tencentcs.com/release/forTestAdvanced?method=createRoom&appId=1400188366&type=liveRoom&title=${title}&anchorId=${this.chatInfo.userId}`
					)
					.then((res) => {
						console.log('移动端liveRoom创建成功', `roomId-${res.data.roomId}`, `title-${title}`)
						this.$store.commit('setGroupId', res.data.roomId)
						this.createRoom()
					})
					.catch(() => {
						this.$store.commit('showMessage', {
							message: '失败',
							type: 'error'
						})
					})
			},
			exitRoom(){
				uni.showModal({
					title: '提示',
					content: '确定要退出直播间吗?',
					success: function(res) {
						if (res.confirm) {
							uni.navigateBack()
						} else if (res.cancel) {
							uni.showToast({
								title: '已取消',
								icon: 'none'
							})
						}
					}
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import url("../static/css/live.scss");

	.live-box {

		.form {
			margin-top: 100rpx;
			background: rgba($color: #000000, $alpha: 0.2);
			border-radius: 24rpx;
			padding: 25rpx;

			.upload-btn {
				width: 200rpx;
				height: 200rpx;
				background: rgba($color: #fff, $alpha: .2);
				border-radius: 12rpx;
			}
		}

		.footer-box {
			position: fixed;
			bottom: 100rpx;
			left: 0;
			right: 0;
		}

	}
	
	.video-container {
	      position: relative;
	      height: 100%;
	      display: flex;
	      flex-direction: column;
	      justify-content: center;
	      align-items: center;
	      & div{
	        background-color: rgba(0,0,0,0) !important;
	      }
	      .stop-camera {
	        position: absolute;
	        top: 0;
	        right: 0;
	        bottom: 0;
	        left: 0;
	        background-color: #ffffff;
	        display: flex;
	        flex-direction: column;
	        justify-content: center;
	        align-items: center;
	      }
	
	      .live-btn {
	        position: absolute;
	        top: 20px;
	        right: 0;
	        left: 0;
	        margin: auto;
	        z-index: 9998;
	        line-height: 38px;
	        width: 100px;
	        border-radius: 20px;
	        text-align: center;
	        font-size: 14px;
	        cursor: pointer;
	        color: #fff;
	
	      }
	
	      .push-btn {
	        background: #2d8cf0;
	      }
	
	      .unpush-btn {
	        background: #2d8cf0;
	      }
	
	    }
</style>
